<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_UPDATE_BACKUP_ACCOUNT'|translate}}</h3>

    <div class="modal-body modal-height">
        <form clrForm #backupAccountForm="ngForm">
            <clr-input-container>
                <label>{{'APP_NAME'|translate}}</label>
                <input clrInput size=45 maxlength="15" type="text" [(ngModel)]="item.name" readonly
                       name="name" required>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_TYPE'|translate}}</label>
                <input clrInput size=45 type="text" [(ngModel)]="item.type" name="type" readonly
                       required>
            </clr-input-container>
            <div *ngIf="item.type=='OSS' || item.type=='S3'">
                <clr-input-container>
                    <label>AccessKey</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['accessKey']" name="accessKey"
                           required>
                </clr-input-container>
                <clr-input-container>
                    <label>SecretKey</label>
                    <input clrInput size=45 type="password" [(ngModel)]="item.credentialVars['secretKey']"
                           name="secretKey" required>
                </clr-input-container>
                <div *ngIf="item.type=='S3'">
                    <clr-input-container>
                        <label>{{'APP_REGION'|translate}}</label>
                        <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['region']" name="region"
                               required>
                    </clr-input-container>
                </div>
            </div>
            <div *ngIf="item.type=='AZURE'">
                <clr-input-container>
                    <label>{{'APP_BACKUP_ACCOUNT_NAME'|translate}}</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['accountName']"
                           name="accountName"
                           required>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_BACKUP_ACCOUNT_KEY'|translate}}</label>
                    <input clrInput size=45 type="password" [(ngModel)]="item.credentialVars['accountKey']"
                           name="accountKey"
                           required>
                </clr-input-container>
            </div>
            <div *ngIf="item.type!='SFTP'">
                <clr-input-container>
                    <label>{{'APP_ENDPOINT'|translate}}</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['endpoint']" name="endpoint"
                           required>
                    <clr-control-helper *ngIf="item.type=='S3'">
                        S3: http://s3.REGION_NAME.amazonaws.com.cn
                    </clr-control-helper>
                    <clr-control-helper *ngIf="item.type=='S3'">
                        {{'APP_EXAMPLE'|translate}}: http://s3.cn-north-1.amazonaws.com.cn
                    </clr-control-helper>
                    <clr-control-helper *ngIf="item.type=='OSS'">
                        OSS: http://REGION_NAME.aliyuncs.com
                    </clr-control-helper>
                    <clr-control-helper *ngIf="item.type=='OSS'">
                        {{'APP_EXAMPLE'|translate}}:http://oss-cn-hangzhou.aliyuncs.com
                    </clr-control-helper>
                    <clr-control-helper *ngIf="item.type=='AZURE'">China: blob.core.chinacloudapi.cn
                    </clr-control-helper>
                    <clr-control-helper *ngIf="item.type=='AZURE'">International: blob.core.windows.net
                    </clr-control-helper>
                </clr-input-container>
                <clr-select-container>
                    <label>{{'APP_BUCKET'|translate}}</label>
                    <select clrSelect name="bucket" [(ngModel)]="item.bucket" required>
                        <option *ngFor="let bucket of buckets" value="{{bucket}}">{{bucket}}</option>
                    </select>
                </clr-select-container>
                <app-modal-alert></app-modal-alert>
            </div>
            <div *ngIf="item.type=='SFTP'">
                <clr-input-container>
                    <label>{{'APP_LDAP_ADDRESS'|translate}}</label>
                    <input clrInput size=45 maxlength="100" type="text" [(ngModel)]="item.credentialVars['address']"
                           name="address" required>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_LDAP_PORT'|translate}}</label>
                    <input clrInput size=45 type="number" [(ngModel)]="item.credentialVars['port']"
                           name="port" required>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_LDAP_USERNAME'|translate}}</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.credentialVars['username']"
                           name="username" required>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_LDAP_PASSWORD'|translate}}</label>
                    <input clrInput size=45 type="password" [(ngModel)]="item.credentialVars['password']"
                           name="password" required>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'BACKUP_PATH'|translate}}</label>
                    <input clrInput size=45 maxlength="100" type="text" [(ngModel)]="item.bucket"
                           name="bucket" required>
                </clr-input-container>
            </div>
        </form>
        <app-modal-alert></app-modal-alert>
        <div class="modal-footer">
            <button *ngIf="item.type!='SFTP'" type="button" class="btn btn-success-outline" (click)="getBuckets()"
                    [disabled]="isSubmitGoing" [clrLoading]="loadingBucket">
                {{'APP_GET_BUCKET'|translate}}
            </button>
            <button type="button" class="btn btn-outline" (click)="onCancel()"
                    [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
            <button type="submit" class="btn btn-primary" (click)="onSubmit()" [clrLoading]="isSubmitGoing"
                    [disabled]="backupAccountForm.invalid">{{'APP_COMMIT'|translate}}
            </button>
        </div>
    </div>
</clr-modal>
